<template>
  <div v-if="props.msg.type === MsgType.Image">
    <el-image
      class="h-[80px] max-w-[180px] border border-gray-300"
      :src="msg.body.url"
      :preview-src-list="[msg.body.url]"
      :hide-on-click-modal="true"
      fit="contain"
    />
  </div>
  <div v-else-if="props.msg.type === MsgType.Video">
    <VideoView :videoUrl="(props.msg.body as FileBody).url" />
  </div>
  <div v-else-if="props.msg.type === MsgType.Audio">
    <AudioView :src="(props.msg.body as FileBody).url" />
  </div>
  <div v-else class="chat-bubble p-2" :class="[arrow]">
    <div v-if="props.msg.type === MsgType.Text" class="break-words">
      {{ (props.msg.body as TextBody).content }}
    </div>
    <div v-else-if="props.msg.type === MsgType.File">
      <FileView
        :url="(props.msg.body as FileBody).url"
        :name="(props.msg.body as FileBody).name"
      />
    </div>
    <div v-else>[暂不支持的消息类型]</div>
  </div>
</template>

<script setup lang="ts">
import AudioView from './AudioView.vue'
import FileView from './FileView.vue'
import VideoView from './VideoView.vue'
import { computed, onMounted, ref } from 'vue'
import { FileBody, Msg, MsgType, TextBody } from './types'
import { ownerId } from './utils'

const props = defineProps<{
  msg: Msg<any>
}>()

const arrow = computed(() => {
  return props.msg.fromId === ownerId ? 'right-arrow' : 'left-arrow'
})

onMounted(async () => {})
</script>
<style lang="scss">
.bg-black-dialog {
  background-color: black;
}
</style>

<style scoped lang="scss">
.chat-bubble {
  position: relative;
  background: #00aabb;
  color: white;
  // padding: 10px 10px;
  border-radius: 5px;
  margin: 5px;
  display: inline-block;
  max-width: 60%;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}

.chat-bubble::before {
  content: '';
  position: absolute;
  top: 30%;
  transform: translateY(-40%);
  border-width: 8px;
  border-style: solid;
}

.left-arrow {
  background: white;
  color: black;
}
.left-arrow::before {
  left: -15px;
  border-color: transparent white transparent transparent;
}
.right-arrow {
  background: #00aabb;
  color: white;
}
.right-arrow::before {
  right: -15px;
  border-color: transparent transparent transparent #00aabb;
}
</style>
